<template>
  <!-- 1 2 3 表示 初级 中级 高级 -->
  <div class="tendency" :class="isUp ? 'up' : 'down'">
    <icon-ph-arrow-up-bold v-if="isUp" />
    <icon-ph-arrow-down-bold v-else />
    <span>{{ arr[levels as number] }}</span>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
const arr = ["初", "中", "高"]
const props = defineProps<{ level: number | string, isUp: boolean }>()

const levels = computed(() => {
  if (isNaN(props.level as any)) {//不是数字
    return props.level;
  } else {
    return arr[props.level as number]
  }
})
</script>


<style lang="scss" scoped>
.tendency {
  font-size: 16px;
  font-weight: bold;
}

.up {
  color: #FFBD21;
}

.down {
  color: #0AC947;
}
</style>